<!--
 * @Author: hecl 1301897425@qq.com
 * @Date: 2022-06-08 15:29:16
 * @LastEditors: hecl 1301897425@qq.com
 * @LastEditTime: 2022-06-10 10:19:55
 * @FilePath: \jwwj-wllz-new-web\src\views\configure\shortMessage\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="shortMessageBox">
    <div class="shortMessageContent">
      <el-tabs v-model="activeName">
        <el-tab-pane label="短信配置" name="first">
          <div class="modular1">
            <el-form ref="form" :inline="true" :model="pageParam" label-width="120px" class="searchBox">
              <el-form-item label="处室名称：">
                <el-select clearable v-model="pageParam.condition.bmid" placeholder="请选择" @change="handSearch">
                  <el-option
                    v-for="item in deptList"
                    :key="item.bmid"
                    :label="item.bmmc"
                    :value="item.bmid">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="姓名：">
                <el-input clearable v-model="pageParam.condition.name" placeholder="请输入姓名" @change="handSearch"></el-input>
              </el-form-item>
            </el-form>
            <el-table
              :data="usersTableData"
              style="width: 100%"
              height='100%'>
              <el-table-column
                label="序号"
                type="index"
                width="50"
                align="center">
              </el-table-column>
              <el-table-column
                prop="userName"
                label="姓名"
                align="center">
              </el-table-column>
              <el-table-column
                prop="bmmc"
                label="处室名称"
                align="center">
              </el-table-column>
              <el-table-column
                label="状态"
                align="center">
                <template slot-scope="scope">
                  <span class="text-light-green" v-if="scope.row.msgTipEnabled==true">启用</span>
                  <span class="text-light-red" v-else>停用</span>
                </template>
              </el-table-column>
              <el-table-column
                label="是否可推送"
                align="center">
                <template slot-scope="scope">
                  <span class="text-light-green" v-if="scope.row.msgHandleEnabled==true">是</span>
                  <span class="text-light-red" v-else>否</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="date"
                label="操作"
                align="center">
                <template slot-scope="scope">
                  <div class="operation">
                    <div @click="userStateChange(!scope.row.msgTipEnabled, scope.row.msgHandleEnabled, scope.row.userId)">{{scope.row.msgTipEnabled==true?'停用':'启用'}}</div>
                    <div @click="userStateChange(scope.row.msgTipEnabled, !scope.row.msgHandleEnabled, scope.row.userId)">{{scope.row.msgHandleEnabled==true?'停用推送':'启用推送'}}</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageParam.pageNum"
              :page-sizes="[20, 40, 50]"
              :page-size="pageParam.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              style="float: right;"
              :total="usersTotal">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="状态配置" name="second">
          <div class="modular2">
            <el-table
              :data="messageTypeList"
              style="width: 100%"
              height='100%'>
              <el-table-column
                label="序号"
                type="index"
                width="50"
                align="center">
              </el-table-column>
              <el-table-column
                prop="type"
                label="消息类型"
                align="center">
              </el-table-column>
              <el-table-column
                prop="description"
                label="类型备注"
                align="left">
              </el-table-column>
              <el-table-column
                label="状态"
                align="center">
                <template slot-scope="scope">
                  <span class="text-light-green" v-if="scope.row.enabled==true">启用</span>
                  <span class="text-light-red" v-else>停用</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="date"
                label="操作"
                align="center">
                <template slot-scope="scope">
                  <div class="operation">
                    <div @click="messageTypeChange(!scope.row.enabled, scope.row.id)">{{scope.row.enabled==true?'停用':'启用'}}</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      activeName: 'first',
      pageParam: {
        pageNum: 1,
        pageSize: 20,
        condition: {
          bmid: null,
          name: null
        }
      },
      deptList: [],
      usersTableData: [],
      currentPage4: 4,
      usersTotal: 0,
      messageTypeList: []
    }
  },
  created () {
    this.getDeptPage()
    this.getUsers()
    this.getConfigList()
  },
  methods: {
    // 获取处室列表
    getDeptPage () {
      const that = this
      let postData = {
        pageNum: 1,
        pageSize: 100
      }
      that.$axios.post(that.$api.dept.page, postData).then(function (rs) {
        if (rs) {
          that.deptList = rs.list
          console.log('deptList', that.deptList)
        }
      })
    },
    // 短信配置列表
    getUsers () {
      const that = this
      that.$axios.post(that.$api.message.getUsers, that.pageParam).then(function (rs) {
        if (rs) {
          that.usersTableData = rs.list
          that.usersTotal = rs.total
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageParam.pageSize = val
      this.getUsers()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageParam.pageNum = val
      this.getUsers()
    },
    handSearch() {
      this.pageParam.pageNum = 1
      this.getUsers()
    },
    userStateChange(msgTipEnabled, msgHandleEnabled, userId) {
      const that = this
      let postData = {
        msgTipEnabled: msgTipEnabled,
        msgHandleEnabled: msgHandleEnabled,
        userId: userId
      }
      that.$axios.post(that.$api.message.userEdit, postData).then(function (rs) {
        if (rs) {
          that.getUsers()
        }
      })
    },
    // 短信类型列表
    getConfigList() {
      const that = this
      let pageParam = {
        pageNum: 1,
        pageSize: 100
      }
      that.$axios.post(that.$api.message.getConfigList, pageParam).then(function (rs) {
        if (rs) {
          that.messageTypeList = rs.records
        }
      })
    },
    // 消息类型状态配置
    messageTypeChange(enabled, id) {
      const that = this
      let postData = {
        enabled: enabled,
        id: id
      }
      that.$axios.post(that.$api.message.messageEnable, postData).then(function (rs) {
        if (rs) {
          that.getConfigList()
        }
      })
    }
  }
}
</script>


<style lang='scss' scoped>
  .shortMessageBox{
    padding: 20px;
    margin-left: 20px;
    font-size: 14px;
    background: #f7f7f7;
    width: calc(100% - 20px);
    overflow-x: hidden;
    height: calc(100% - 40px);
    box-sizing: border-box;
    .shortMessageContent{
      height: calc(100% - 20px);
      background: #fff;
      border-radius: 3px;
      padding: 30px 20px 20px;
      box-sizing: border-box;
      ::v-deep .el-table__body-wrapper{
        overflow-y: auto;
      }
      ::v-deep .el-tabs__item{
        font-size: 20px;
      }
      ::v-deep .el-tabs__item.is-active{
        font-weight: bold;
      }
      .searchBox{
        margin: 20px 0;
      }
      .operation{
        display: flex;
        color: #369fff;
        width: 100%;
        justify-content: center;
        div{
          margin-right: 20px;
          cursor: pointer;
        }
        div:last-child{
          margin-right: 0px;
        }
      }
      .el-table {
        height: calc(100vh - 390px)!important;
        ::v-deep.cell{
          padding: 4px 0 !important;
        }
      }
      .modular2{
        .el-table {
          height: calc(100vh - 220px)!important;
        }
      }
      .el-pagination{
        margin-top: 40px;
      }
    }
  }
</style>